<template>
  <div class="mod-category">
    <el-form :inline="true" :model="dataForm">
      <el-form-item label="手机号:">
        <el-input v-model="dataForm.phone" placeholder="请输入手机号" clearable />
      </el-form-item>
      <el-form-item label="标题:">
        <el-input v-model="dataForm.remark" placeholder="请输入标题" clearable />
      </el-form-item>
      <el-form-item label="审核状态:">
        <el-select v-model="dataForm.status" clearable placeholder="请选择审核状态">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getlist()">
          查询
        </el-button>
        <el-button @click="clearDatas()">
          清空
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="state.supplyList" style="width: 100%;">
      <el-table-column prop="createUser" width="100" label="发布者" />
      <el-table-column prop="userId" width="100" label="昵称" />
      <el-table-column prop="phone" label="联系电话" />
      <el-table-column prop="publishType" width="90" label="发布类型" />
      <el-table-column prop="vxPic" label="头像">
        <template #default="scope">
          <img alt="" :src="scope.row.vxPic" style="width: 50px;height: 50px;">
        </template>
      </el-table-column>
      <el-table-column prop="pic" label="封面图">
        <template #default="scope">
          <img alt="" :src="scope.row.pics[0]" style="width: 50px;height: 50px;">
        </template>
      </el-table-column>
      <el-table-column prop="content" label="内容" />
      <el-table-column prop="remark" label="标题" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.status == 0">
            通过
          </el-tag>
          <el-tag type="warning" v-if="scope.row.status == 2">
            待审核
          </el-tag>
          <el-tag type="danger" v-if="scope.row.status == 1">
            未通过
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="时间" />
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="onDetails(scope.row)">
            查看
          </el-button>
          <el-button type="danger" @click="onDeletes(scope.row.supplyId)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize"
      :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle" />
    <!-- 弹窗, 新增 / 修改 -->
    <LookList v-if="state.lookListVisible" @refresh-data-list="getlist" ref="lookLists" />
  </div>
</template>

<script setup>
import { checkFileUrl, isAuth, treeDataTranslate } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import LookList from '../../../common/home/lookList.vue';

const dataForm = ref({})
const options = [
  {
    value: '0',
    label: '通过'
  },
  {
    value: '2',
    label: '待审核'
  },
  {
    value: '1',
    label: '未通过'
  }
]
onMounted(() => {
  getlist()
})
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})
/**
 * 每页数
 * @param val
 */
const sizeChangeHandle = (val) => {
  page.pageSize = val
  page.currentPage = 1
  getlist()
  //   getDataList(page)
}
/**
 * 当前页
 * @param val
 */
const currentChangeHandle = (val) => {
  page.currentPage = val
  getlist()
}
const state = reactive({
  supplyList: [],
  lookListVisible: false
})
/**
 * 获取数据列表
 */
const getlist = () => {
  dataForm.value.logo = ''
  // dataForm.value.pageSize = page.pageSize
  // dataForm.value.current = page.currentPage
  http({
    url: http.adornUrl('/supply/list?current='+page.currentPage+'&pageSize='+page.pageSize),
    method: 'post',
    data: dataForm.value
  }).then((res) => {
    page.total = res.data.total
    state.supplyList = res.data.records.map((item) => {
      if (item.publishType == 1) {
        item.publishType = '供应'
      } else {
        item.publishType = '需求'
      }
      return item
    })
  })
}
const lookLists = ref(null)
const onDetails = (obj) => {
  state.lookListVisible = true
  nextTick(() => {
    lookLists.value?.init(obj)
  })
}
/**
 * 删除
 * @param id
 */
const onDeletes = (ids) => {
  ElMessageBox.confirm('确定进行删除操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    http({
      url: http.adornUrl('/supply/delete/' + ids),
      method: 'get',
    }).then(() => {
      ElMessage({
        message: '操作成功',
        type: 'success',
        duration: 1500,
        onClose: () => {
          getlist()
        }
      })
    })
  })
}
/**
 * 清除数据
 */
const clearDatas = () => {
  dataForm.value = {}
  getlist()
}

</script>

<style lang="scss" scoped>
.mod-category {
  img {
    height: 80px;
    width: 200px;
  }
}
</style>